<template>
	<view class="l-barrage">
		<view 
			v-if="item.display" class="aon" 
			v-for="(item,index) in items" :key="index"
			:style="{top: `${item.top}%`,color: item.color,
				animation: `mymove ${Number(item.time)}s linear forwards`
			}"
		>
			<img class="icon" v-if="item.type == 1" src=".././static/icon/icon_16_like_r@2x.png" alt="">
			<img class="icon" v-if="item.type == 2" src=".././static/icon/icon_16_love_r@2x.png" alt="">
			<img class="icon" v-if="item.type == 3" src=".././static/icon/icon_16_smile_r@2x.png" alt="">
			{{item.text}}
		</view>
	</view>
</template>

<script>
let cycle;

// 弹幕字体颜色
function getRandomColor() {
  let rgb = []
  for (let i = 0; i < 3; ++i) {
	let color = Math.floor(Math.random() * 256).toString(16)
	color = color.length == 1 ? '0' + color : color
	rgb.push(color)
  }
  return '#' + rgb.join('')
}	

export default {
	name: 'l-barrage',
	props: {
		minTime: {
			type: Number,
			default: 10
		},
		maxTime: {
			type: Number,
			default: 12
		},
		minTop: {
			type: Number,
			default: 0
		},
		maxTop: {
			type: Number,
			default: 50
		},
		scrollTop: {
			type: Number,
			default: 0
		}
	},
	computed: {
		style() {
			var CustomBar= this.CustomBar;
		},
	},
	data() {
		return {
			items: [],
			CustomBar: this.CustomBar
		}
	},
	
	methods: {
		sum (m,n){
		　　var num = Math.floor(Math.random()*(m - n) + n);
		　　return (num)
		},
		add(text = '',time = Math.ceil(Math.floor(Math.random()*(this.maxTime-this.minTime+1)+this.minTime))) {
			this.items.push({
				text,
				time,
				type: this.sum(1, 4),
				top: Math.ceil(Math.random()*(this.maxTop-this.minTop+1)+this.minTop ) + 30,
				// color: getRandomColor(),
				color: "#fff",
				display: 1,
			});
		},
		start(items = []) {
			this.items = [];
			cycle && (clearInterval(cycle));
			let i = 0,len = items.length;
			
			cycle = setInterval(()=> {
				let time = 5;
				// #ifndef H5
					time = Math.ceil(Math.floor(Math.random()*(this.maxTime-this.minTime+1)+this.minTime));
				// #endif
				
				if (i < len) {
					this.add(items[i],time);
					i++;
				}
				else {
					clearInterval(cycle);
					setTimeout(()=>{
						this.$emit("end",{});
					},time * 1000)
				}
			}, 500)
		}
	}
}	
	
</script>

<style lang="scss">
.aon{
	// position: fixed;
	position: absolute;
	white-space:nowrap;
	animation: mymove 5s linear forwards;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	animation-fill-mode: forwards;
	height: 48rpx;
	line-height: 48rpx;
	background: rgba(0,0,0,0.50);
	border-radius: 24rpx;
	padding: 0 20rpx;
	display: flex;
	align-items: center;
	.icon{
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}
}
.l-barrage{
  z-index: 3;
  width: 100%;
  // position: fixed;
  position: absolute;
  width: 100vw;
  height: 100vw;
}

@keyframes mymove
{
from{left: 100%;}
  to{left: -200%;}
}

@-moz-keyframes mymove /* Firefox */
{
from{left: 100%;}
  to{left: -200%;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from{left: 100%;}
  to{left: -200%;}
}

@-o-keyframes mymove /* Opera */
{
from{left: 100%;}
  to{left: -200%;}
}
</style>
